import { large_screen_get_healthydata } from '@/services/bigdata';
import { get_healthydata } from '@/services/patient';
import { Line } from '@ant-design/charts';
import { Radio } from 'antd';
import { memo, useEffect, useState } from 'react';

interface Iprops {
  editId: number | undefined;
  token:any;
}
// y轴最小刻度
// var minvalue = 0;
const TemperCharts = (props: Iprops) => {
  const { editId,token} = props;
  // 图表数据
  const [daydata, setDaydata] = useState<any>([]);
  // 有无数据 0 无数据 1 有数据
  const [dataFlag, setdataFlag] = useState(0);

  useEffect(() => {
    setDaydata(get_status());
    get_temper_data(0);
  }, [editId]);

  // 返回数据为空时的默认数组 显示用来显示图表横坐标和类别category
  const get_status = () => {
    var new_data = [];
    for (let i = 0; i < 24; i += 3) {
      let time = '';
      if (i.toString().length == 1) {
        time = '0' + i;
      } else {
        time = i.toString();
      }
      time += ':00:00';
      new_data.push({
        time,
        category: '体温',
      });
    }
    return new_data;
  };

  // 获取数据
  const get_temper_data = async (status: number) => {
    let request_body = {
      old_id: editId,
      type: 'temper',
      status,
    };
    let params: any = await large_screen_get_healthydata(token,request_body);
    if (params.code == 200) {
      var new_data: any = init_data(params.data.list);
      if (new_data.length != 0) {
        setDaydata(new_data);
        setdataFlag(1);
      } else {
        setDaydata(get_status());
        setdataFlag(0);
      }
    }
  };

  const init_data = (data: any) => {
    var new_data = [];
    if (data != undefined) {
      // var min_value: any = data.length == 0 ? 5 : parseFloat(data[0].value);
      for (let i = 0; i < data.length; i++) {
        new_data.push({
          time: data[i].x,
          value: parseFloat(data[i].value),
          category: '体温',
        });
        // if (min_value > parseFloat(data[i].value)) {
        //   min_value = parseFloat(data[i].value);
        // }
      }
      // minvalue = parseFloat(min_value);
      // minvalue = minvalue - 5 < 0 ? 0 : minvalue - 5;
      return new_data;
    }
  };

  const change_status = (e: any) => {
    get_temper_data(e.target.value);
  };

  const Temperconfig = {
    data: daydata,
    height: 200,
    xField: 'time',
    yField: 'value',
    yAxis: {
      //根据有无数据处理纵坐标最大值，在无数据的时候可显示纵坐标
      max: dataFlag == 0 ? 45 : null,
    },
    seriesField: 'category',
    tooltip: {
      customContent: (title: string, items: any) => {
        return (
          <div style={{ width: '100px', height: '50px', fontSize: '14px' }}>
            <div style={{ marginTop: '8px' }}>{items[0] && items[0].data.time}</div>
            <div>
              <div style={{ marginTop: '8px', marginLeft: '8px' }}>
                <span>体温：</span>
                {items[0] && items[0].data.value}
              </div>
            </div>
          </div>
        );
      },
    },
  };
  return (
    <>
      {/*体温曲线图 ℃*/}
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          width: '500px',
          height: '45px',
          alignItems: 'center',
          marginBottom: '15px',
        }}
      >
        <p
          style={{
            fontSize: '16px',
            color: 'rgba(23, 23, 37, 1)',
            marginBottom: '0px',
          }}
        >
          体温曲线图 ℃
        </p>
        <Radio.Group onChange={change_status} defaultValue={0} size="middle" buttonStyle="solid">
          <Radio.Button value={0} style={{ width: '80px', textAlign: 'center' }}>
            日
          </Radio.Button>
          <Radio.Button value={1} style={{ width: '80px', textAlign: 'center' }}>
            周
          </Radio.Button>
          <Radio.Button value={2} style={{ width: '80px', textAlign: 'center' }}>
            月
          </Radio.Button>
        </Radio.Group>
      </div>
      <Line {...Temperconfig} style={{ width: '500px' }} />
    </>
  );
};
export default memo(TemperCharts);
